<template>
  <div class="container" style="height: 100%">
    <div class="player" style="height: 100%; background: #000; position: relative">
      <div :id="id" class="ezuikit_video" :style="'min-height: ' + minHeight"></div>
    </div>
  </div>
</template>
<script>
// import EZUIKit from 'ezuikit-js'
export default {
  props: {
    id: String,
    deviceUrl: String,
    accessToken: String,
    isShow: Boolean,
    minHeight: {
      type: String,
      default: 150
    }
  },
  data() {
    return {
      player: '',
      isShowBig: false
    }
  },
  created() {
    setTimeout(() => {
      this.initEZUIKit()
    }, 500)
  },
  methods: {
    // 初始化
    initEZUIKit() {
      console.group('mounted 组件挂载完毕状态===============》')
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: this.id,
        accessToken: this.accessToken,
        url: this.deviceUrl,
        template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        footer: ['hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
        audio: 1 // 是否默认开启声音 0 - 关闭 1 - 开启
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: 300,
        // height: 600,
      })
    },
    // 云台控制
    videoPtz(num) {
      let id = this.id.substring(4)
      this.$api.device.videoPtz({ direction: num, id }).then(res => {
        if (res.code == 200) {
          this.$toaster.ok(res.msg)
        } else {
          this.$toaster.error(res.msg)
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css" scoped>
.container {
  background-color: #efefef;
  min-height: 100%;
}
.button_container {
  position: absolute;
  bottom: 60px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
}
.button_container:hover {
  background: rgba(255, 255, 255, 0.3);
}

.icon_container {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0.7);
}

.nav {
  width: 100px;
  height: 100px;
  display: flex;
  overflow: hidden;
  border-radius: 50px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.nav::before {
  content: '';
  width: 46px;
  height: 46px;
  border-radius: 23px;
  position: absolute;
  background: #eee;
  z-index: 1200;
  top: 27px;
  left: 27px;
}
.button2_container {
  position: absolute;
  bottom: 60px;
  right: 30px;
  z-index: 1000;
}
.nav > ul {
  display: flex;
  flex-wrap: wrap;
}
.nav > ul > li {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  transform: rotateZ(45deg);
}
.nav > ul > li:nth-child(1) {
  transform-origin: 100% 100%;
}
.nav > ul > li:nth-child(2) {
  transform-origin: 0 100%;
}
.nav > ul > li:nth-child(3) {
  transform-origin: 100% 0;
}
.nav > ul > li:nth-child(4) {
  transform-origin: 0 0;
}

.nav > ul > li:hover {
  background: rgba(255, 255, 255, 0.7);
}

.ezuikit_video {
  width: 100%;
  height: auto;
  overflow: hidden;
}
</style>
